<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            width: 300px;
            height: 300px;
            background-color: pink;
        }
    </style>
</head>
<body>
<div class="box" id="main"></div>
<script src="js/echarts.min.js"></script>
<script>
    window.onload = function pie() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        myChart.showLoading();    //数据加载完之前先显示一段简单的loading动画
        //声明一个对象
        var list = [];
        var nus = [];
        $.ajax({
            async: true,            //异步请求
            data: {},
            //请求方式get
            type: "GET",
            //请求地址
            url: "http://localhost:8080/k",
            //数据，json字符串
            dataType: "json",
            //请求成功
            success: function (result) {
                console.log(result);
                //进行数据的遍历
                $.each(result, function (index, item) {
                    //添加数据到对象
                    //物品名
                    list.push(item.atype);
                    //物品名和数量
                    nus.push({
                        value: item.amount,
                        name: item.atype
                    });
                });
                console.log(list);
                console.log(nus);
                myChart.hideLoading();    //隐藏加载动画

                var option = {
                    title: {
                        text: '日志信息',
                        left: 'center'
                    },

                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b}: {c} ({d}%)'
                        // 计算占比%
                    },

                    legend: {                 //旁边的小标图
                        orient: 'vertical',
                        right: 10,
                        top: 300,
                        //添加物品名
                        data: list
                    },
                    series: [
                        {
                            name: '访问来源',
                            type: 'pie',     // 设置图表类型为饼图
                            radius: '55%',      //饼图的半径，外半径为可视区尺寸的长度。
                            // roseType: 'angle',           //设置图表类型为南丁格尔图
                            avoidLabelOverlap: false,
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: '30',
                                    fontWeight: 'bold'
                                }
                            },
                            labelLine: {
                                lineStyle: {
                                    color: 'rgba(200, 0, 255, 0.3)'
                                },
                                smooth: 0.2,
                                length: 10,
                                length2: 20

                            },
                            //添加物品名和数量   数据对照下面的格式
                            data: nus
                            // 数据数组，name 为数据项名称，value 为数据项值    格式
                            // { value: 335, name: '物品资产1' },
                        }
                    ]
                };
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            },
            error: function (errorMsg) {
                //请求失败时执行该函数
                alert("图表请求数据失败!");
                myChart.hideLoading();
            }
        });
    };

</script>
</body>
</html>